 <script type="text/javascript">

    
	function insertData(object)
	{
	    html_codeeditor.replaceSelection(object.attr("id"));
	}

	function updatePreview() {
		
	    var previewFrame = document.getElementById('preview');
	    var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
	    
	    preview.open();
	    preview.write(html_codeeditor.getValue());
	    preview.close();    
	   
		uu.loadCssFile('/public/css/main',preview,'css_file');
		uu.loadCss(css_codeeditor.getValue(),preview,'css_code');
		uu.loadScriptFile('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', preview, 'js_file');
		uu.loadScript(js_codeeditor.getValue(),preview, 'js_code');
		
		preview.appendChild(head);	
		

	}
 </script>
    <div class="idTabs" style="padding:0;margin:5px 0;">
      <ul>
        <li><a href="#html_editor">HTML</a></li>
        <li><a href="#css_editor">CSS</a></li>
        <!-- Try adding this <br/> tag here -->
        <li><a href="#js_editor">Javascript</a></li>
      </ul>
      <hr />
      <div class="items">    
        <div id="html_editor"><textarea id="Html_code"></textarea></div>
        <div id="css_editor"><textarea id="Css_code"></textarea></div>
        <div id="js_editor"><textarea id="Js_code"></textarea></div>
      </div>
    </div>
<?php
    $this->widget('ext.editor.CodeMirror.CodeMirrorWidget',array(
        'id'=>'Html_code',
        'editor'=>'html_codeeditor',
        'mode'=>'xml',
        'lineNumbers'=> true,
        'theme'=>'ambiance',
        'syntax'=>'xml',
        'onChange'=>'js:function(){
              //实时预览样式
              updatePreview();
 //             previewInfo();
        }',
        'extraKeys'=>array(
            'F11'=>'js:function(cm) {
                setFullScreen(cm, !isFullScreen(cm));
            }',
            'Esc'=>'js:function(cm) {
                if (isFullScreen(cm)) setFullScreen(cm, false);
            }' 
        )    
        
    ));
?>